<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>登录</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
<main>
    <form class="form">
        <div class="form__cover"></div>
        <div class="form__loader">
            <div class="spinner active">
                <svg class="spinner__circular" viewBox="25 25 50 50">
                    <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="4"
                            stroke-miterlimit="10"></circle>
                </svg>
            </div>
        </div>
        <div class="form__content">
            <h1 style="display:none">登录验证</h1>
            <div class="styled-input">
                <input class="styled-input__input" name="username" id="username" type="text"/>
                <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">输入用户名</span></div>
                <div class="styled-input__circle"></div>
            </div>
            <div class="styled-input">
                <input class="styled-input__input" type="password" id="password"/>
                <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">输入密码</span></div>
                <div class="styled-input__circle"></div>
            </div>
            <button type="button" class="styled-button" id="login_btn"><span
                    class="styled-button__real-text-holder"> <span
                    class="styled-button__real-text">登录</span> <span class="styled-button__moving-block face"> <span
                    class="styled-button__text-holder"> <span class="styled-button__text">登录</span> </span> </span><span
                    class="styled-button__moving-block back"> <span class="styled-button__text-holder"> <span
                    class="styled-button__text">登录</span> </span> </span> </span>
            </button>
            <button type="button" class="styled-button" id="register"><span
                    class="styled-button__real-text-holder"> <span
                    class="styled-button__real-text">注册</span> <span class="styled-button__moving-block face"> <span
                    class="styled-button__text-holder"> <span class="styled-button__text">注册</span> </span> </span><span
                    class="styled-button__moving-block back"> <span class="styled-button__text-holder"> <span
                    class="styled-button__text">注册</span> </span> </span> </span>
            </button>
        </div>
    </form>
</main>
</body>
</html>
